<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap-grid.css">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <link rel="icon" href="">
    <title>首页</title>
    <style>
        *{padding: 0vw;margin: 0vw;}
        header,section{width: 100%;box-sizing: border-box;}
        
        header{position: fixed;top: 0px;height: 19.33vw;background: #fff;box-sizing: border-box;left: 0;right: 0;z-index: 999;}
        .top{display: flex;padding: 2vw;align-items: center;justify-content: space-between;box-sizing: border-box;}
        .wyyx{width: 18.67vw;height: 4.4vw;background: url(https://yanxuan-static.nosdn.127.net/hxm/tetris/common-mobile/sprite/hd.png)-0.4vw -0.4vw;
            background-size: 27vw;        }
        .inp_box{width: 58.67vw;height: 7.33vw;background-color: #EDEDED;border-radius: 5px;display: flex;    align-items: center;}
        .inp_box>*{display: block;}
        .ss_img{background-color: aqua;width: 4vw;height: 4vw;background: url(https://yanxuan-static.nosdn.127.net/hxm/tetris/common-mobile/sprite/hd.png)-15.4vw -6vw;background-size: 27vw;margin-left: 4.67vw;margin-right: 2vw;}
        .top_ssk{width: 40.67vw;height: 7.33vw;background-color: #EDEDED;border: none;border-radius: 5px;}
        .sign{width: 9.33vw;height: 5.07vw;color: #DD1A21;border: 0.4vw solid #DD1A21;line-height: 5.07vw;
             border-radius: 5px;text-align: center;font-size: 14px;}
        

        nav{padding: 0vw 4vw;border-bottom: 0.5vw solid #EDEDED;box-sizing: border-box;}
        .show{height: 8vw;width: 11.6vw;color: #DD1A21;line-height: 8vw;border-bottom: 0.5vw solid #DD1A21;text-align: center;}
 
        
        .lbt_box{height: 40vw;background-color: #DD1A21;margin-top: 21vw;}


        .wyzy{padding: 4vw;height: 10.67vw;box-sizing: border-box;display: flex;align-items: center;justify-content: space-around;}
        .wyzy>div{font-size: 13px;} 
        .new{padding: 0vw 3.33vw 0vw 3.33vw;height: 43.33vw;width: 93.33vw;display: flex;justify-content: space-between;flex-direction: column;}
        .new_nr{display: flex;align-items: center;justify-content: space-between;}
        .new_img{width: 13.33vw;height: 13.33vw;border-radius: 10px;margin: auto;display: block;}
        .kuai>p{text-align: center;font-size: 13px;}

        .guangg{width: 94.67vw;height: 10.67vw;margin: auto;background: #1ACBAD;border-radius: 10px;margin-top: 4vw;margin-bottom: 4vw;}
        
        .newPeo_box{width: 92vw;height: 66.67vw;margin: 2.67vw auto 0vw;}
        h2{height: 4vw;font-size: 16.6px !important;text-align: center;font-weight: 500;}
        .hb_box{display: flex;height: 58vw;width: 100%;flex-direction: row;justify-content: space-between;margin-top: 4vw;}
        .hb{background: #F8EACF;width: 45.6vw;border-radius: 4px;}
        .hb_right{width: 45.8vw;display: flex;flex-direction: column;justify-content: space-between;}
        .hb_right>div{position: relative;}
        .fls,.xr{width: 45.6vw;height: 28.67vw;border-radius: 4px;}
        .fls{background: #FBE2D3;}
        .xr{background: #FFEDC2;}

        .cla_hot{width: 92vw;margin: 12vw auto 0vw;height: 87.6vw;}
        .cla_hot_zi{height: 4vw;font-size: 16.6px;}
        .shangpin_box{margin: 4.67vw auto 0vw;width: 100%;height: 77.33vw;}   

        .big_sp>*{float: left;margin-right: 1.2vw;margin-bottom: 1.2vw;}
        .big_sp_le,.big_sp_ri{width: 44vw;height: 26.67vw;border-radius: 5px;position: relative;}
        .big_sp_le{background: #F9F3E3;}
        .big_sp_ri{background: #EBEFF5;}
        
        .sm_sp{margin-top: 1.33vw;height: 89.6vw;box-sizing: border-box;}
        .sm_sp>*{float: left;}
        .sm_sp_k{width: 21.5vw;height: 24vw;background: #F5F5F5;margin-right: 1.2vw;margin-bottom: 1.2vw;border-radius: 5px;}

        .xm_box{margin: 8.67vw auto;width: 92vw;height: 34.67vw;}

        .butt_box{display: flex;align-items: center;justify-content: space-between;height: 34.67vw;width: 92vw;margin: auto;margin-top: 8.8vw;}
        .butt_box>*{background: #F5F5F5;width: 45.6vw;height: 34.67vw;border-radius: 5px;padding: 4vw 0px 0px 4vw;box-sizing: border-box;}

        footer{margin-top: 6.93vw;background: #414141;height: 32.67vw;width: 100%;}
        .xzapp{margin: 7.33vw auto 5.33vw;width: 53.33vw;height: 13vw;display: flex;padding-top: 7.33vw;justify-content: space-between;} 
        .xzapp>div{width: 22.67vw;border: 1px solid #999999;text-align: center;line-height: 8vw;color: #fff;border-radius: 5px;height: 8vw;}
        .butt_box p{font-size: 17.6px;}
        .butt_box>div{position: relative;}
        footer P{color: #999999;text-align: center;font-size: 14px;}




        .jinzi{color: #FF5000 !important;font-size: 13.24px !important;}
        .huizi{color: #7F7F7F !important;font-size: 13.24px !important;}
        .hb,.fls,.xr{padding: 4.67vw;box-sizing: border-box;}
        .newPeo_box p{font-size: 17.6px;font-weight: 500;}
       
        .big_sp p{font-size: 15.5px;padding:  9.6vw 0vw 0vw 3.33vw;font-weight: 500;}
        .xhx{border-bottom: 2px solid #323232;padding-bottom: 2.67vw;    position: absolute;color: #fff0;}
        .smzi{font-size: 13px;text-align: center;padding-top: 2vw;}



        .wyzy_one_img{width: 4.5vw;height: 4.5vw;vertical-align: middle;margin-right: 1.33vw;}
        .wyzy_one{height: 10.67vw;line-height: 10.67vw;}
        .big_sp_img{height: 26.67vw;position: absolute;right: 0;top: 0;}
        .fl_img{position: absolute;right: 0;top:0;height: 100%;}
        .cxy_1,.cxy_2{width: 17.33vw;}

        .sm_sp_k_img{width: 16vw;display: block;margin: auto;}
        p{margin-bottom: 0rem !important;}
            
        .hb_img{width: 33.33vw;height: 33vw;background: url(https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png);margin: 6vw auto;background-size: 33.33vw;;}
</style>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="wyyx"></div>
            <div class="inp_box"><div class="ss_img"></div><input class="top_ssk" type="text" name="" id="" placeholder="搜索商品, 共30000+款好物"></div>
            <div class="sign">登录</div>
        </div>
        <nav>
            <div class="show">推荐</div>
        </nav>
    </header>
    <!-- 轮播 -->
    <section class="lbt_box">
        <div id="demo" class="carousel slide" data-bs-ride="carousel">
            <!-- 指示符 -->
           <div class="carousel-indicators">
             <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
             <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
             <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
             <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
           </div>
           <!-- 轮播图片 -->
           <div class="carousel-inner">
             <div class="carousel-item active">
               <img src="https://yanxuan.nosdn.127.net/23f3a07246ba30a22575b9af717bcf62.jpg" class="d-block" style="width:100%">
             </div>
             <div class="carousel-item">
               <img src="https://yanxuan.nosdn.127.net/static-union/1671526972dc59e2.jpg" class="d-block" style="width:100%">
             </div>
             <div class="carousel-item">
               <img src="https://yanxuan.nosdn.127.net/static-union/167228359837b102.jpg" class="d-block" style="width:100%">
             </div>
             <div class="carousel-item">
                <img src="https://yanxuan.nosdn.127.net/e504becc19c6fc6336ad7938fde985d5.jpg?type=webp&imageView&quality=75&thumbnail=750x0" class="d-block" style="width:100%">
              </div>
           </div>
         </div>

    </section>
    <!-- 网易自营品牌 -->
    <section class="wyzy">
       
    </section>
    <!-- 新品首发 -->  
    <section class="new">
        <div class="new_nr">
           
        </div>
        <div class="new_nr">
           
        </div>

    </section>
    <!-- 广告 -->
    <section class="guangg"></section>
    <!-- 新人专享 -->
    <section class="newPeo_box">
        <h2>- 新人专享礼 -</h2>
        <div class="hb_box">
            <div class="hb">
                <p>新人专享礼包</p>
                <div class="hb_img"></div>
            </div>
            <div class="hb_right">
                <div class="fls">
                    <p class="fls_txt"></p>
                    <p class="huizi jrtj"></p>
                    <img class="fl_img" src="" alt="">
                </div>
                <div class="xr">
                    <p class="xrpt"></p>
                    <p class="huizi byou"></p>
                    <img class="fl_img" src="" alt="">
                </div>
            </div>
        </div>

    </section>
    <!-- 类目热销 -->
    <section class="cla_hot">
        <p class="cla_hot_zi">类目热销</p>
        <section class="shangpin_box">
            <div class="big_sp">
                <!-- <div class="big_sp_le">
                    <p><span class="xhx">美食</span>酒水榜</p>
                </div>
                <div class="big_sp_ri">
                    <p><span class="xhx">服饰</span>鞋包榜</p>
                </div> -->
            </div>
            <div class="sm_sp">
                <!-- <div class="sm_sp_k">
                    <p class="smzi">居家生活榜</p>
                    <img class="sm_sp_k_img" src="" alt="">
                </div>
                <div class="sm_sp_k"></div>
                <div class="sm_sp_k"></div>
                <div class="sm_sp_k"></div>
                <div class="sm_sp_k"></div>
                <div class="sm_sp_k"></div>
                <div class="sm_sp_k"></div> -->
            </div>
        </section>
    </section>
    <!-- 穿新衣 -->
    <section class="butt_box">
        <div class="butt_le">
            <p></p>
            <p class="huizi"></p>
        </div>
        <div class="butt_ri">
            <p></p>
            <p class="jinzi"></p>
            <img class="cxy_1" src="" alt="">
            <img class="cxy_2" src="" alt="">
        </div>
    </section>   
    <!-- 页脚   -->
    <footer>
        <div class="xzapp">
            <div>下载APP</div>
            <div>电脑版</div>
        </div>
        <p>网易公司版权所有©1997-2022</p>
        <p>食品经营许可证:JY1320465223515</p>
    </footer>
    <script src="js/ajax.js"></script>
    <script>
        var wyzy = document.getElementsByClassName("wyzy")[0]
        var shangpin_box = document.getElementsByClassName("shangpin_box")[0]
        var big_sp = document.getElementsByClassName("big_sp")[0]
        var new_ = document.getElementsByClassName("new")[0]
        var new_nr = document.getElementsByClassName("new_nr")
        var fls_txt = document.getElementsByClassName("fls_txt")[0]
        var jrtj = document.getElementsByClassName("jrtj")[0]
        var xrpt = document.getElementsByClassName("xrpt")[0]
        var byou = document.getElementsByClassName("byou")[0]
        var fl_img = document.getElementsByClassName("fl_img")
        var butt_box = document.getElementsByClassName("butt_box")[0]
        var butt_le_1 = document.querySelectorAll(".butt_le>p")[0]
        var butt_le_2 = document.querySelectorAll(".butt_le>p")[1]
        var butt_ri_1 = document.querySelectorAll(".butt_ri>p")[0]
        var butt_ri_2 = document.querySelectorAll(".butt_ri>p")[1]

        var cxy_1 = document.getElementsByClassName("cxy_1")[0]
        var cxy_2 = document.getElementsByClassName("cxy_2")[0]
        var butt_le = document.getElementsByClassName("butt_le")[0]
        var sm_sp = document.getElementsByClassName("sm_sp")[0]

        // console.log(cxy_1);
  
        window.onload = function () {
                ajax({
                    method: "get",
                    url: "http://127.0.0.1:3002/wyjson",
                    success: function (data) {
                    //网易自营品牌
                        for (var i = 0; i < data.data.data.policyDescList.length; i++) {
                            wyzy.innerHTML += `
                                             <div class="wyzy_one"><img class="wyzy_one_img" src="${data.data.data.policyDescList[i].icon}" alt="">${data.data.data.policyDescList[i].desc}</div> 
                                               `
                        }
                    //类目热销榜
                        for (var i = 0; i < 2; i++) {
                            big_sp.innerHTML += `
                                            <div class="big_sp_le">
                                                <p><span class="xhx">美食</span>
                            ${data.data.data.categoryHotSellModule.categoryList[i].extra.operationResource.categoryName}</p>
                                                <img class="big_sp_img" src="
                            ${data.data.data.categoryHotSellModule.categoryList[i].picUrl}
                                                ">
                                            </div>
                                               `
                        }
                    //新品首发
                    for (var i = 0; i < 5; i++) {
                            new_nr[0].innerHTML += `
                                        <div class="kuai">
                                            <img class="new_img" src="${data.data.data.kingKongModule.kingKongList[i].picUrl}">
                                            <p>${data.data.data.kingKongModule.kingKongList[i].text}</p>
                                        </div>
                                            `
                        }
                    for (var i = 5; i < 10; i++) {
                        new_nr[1].innerHTML += `
                                    <div class="kuai">
                                        <img class="new_img" src="${data.data.data.kingKongModule.kingKongList[i].picUrl}">
                                        <p>${data.data.data.kingKongModule.kingKongList[i].text}</p>
                                    </div>
                                        `
                    }
                    // 福利社
                    fls_txt.innerText = data.data.data.indexActivityModule[0].title;
                    jrtj.innerText = data.data.data.indexActivityModule[0].subTitle;
                    xrpt.innerText = data.data.data.indexActivityModule[1].title;
                    byou.innerText = data.data.data.indexActivityModule[1].tag;
                    fl_img[0].setAttribute("src",data.data.data.indexActivityModule[0].showPicUrl)
                    fl_img[1].setAttribute("src",data.data.data.indexActivityModule[1].showPicUrl)
                    // 穿新衣
                    butt_le_1.innerText = data.data.data.sceneLightShoppingGuideModule[0].styleBanner.title;
                    butt_le_2.innerText = data.data.data.sceneLightShoppingGuideModule[0].styleBanner.desc
                    butt_ri_1.innerText = data.data.data.sceneLightShoppingGuideModule[1].styleItem.title
                    butt_ri_2.innerText = data.data.data.sceneLightShoppingGuideModule[1].styleItem.desc
                    butt_le.style = `background-image:url(${data.data.data.sceneLightShoppingGuideModule[0].styleBanner.picUrl}),url(#F5F5F5);background-size:100% 100%;`
                    cxy_1.setAttribute("src",data.data.data.sceneLightShoppingGuideModule[1].styleItem.picUrlList[0])
                    cxy_2.setAttribute("src",data.data.data.sceneLightShoppingGuideModule[1].styleItem.picUrlList[1])
                    // 居家生活榜
                    for (var i = 2; i < data.data.data.categoryHotSellModule.categoryList.length; i++) {
                        sm_sp.innerHTML += `
                        <div class="sm_sp_k">
                            <p class="smzi">${data.data.data.categoryHotSellModule.categoryList[i].extra.operationResource.categoryName}</p>
                            <img class="sm_sp_k_img" src="${data.data.data.categoryHotSellModule.categoryList[i].picUrl}" alt="">
                        </div>
                                               `
                        }

                    }
                    

                })
            }
        
             
        // ajax({
        //     method: "get",
        //     url: "https://m.you.163.com/xhr/index.json",
        //     success: function (data) {
        //         console.log(data);
        //          var wyzy_one = document.getElementsByClassName("wyzy_one")[0]
        //         //  for(var i = 0;i<data.data.policyDescList.length;i++)
        //          wyzy_one.innerText = data.data.policyDescList[0].desc
        //     }

        // })
    </script>

    
</body>
</html>